<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>广东</title>
	<link rel="stylesheet" href="css/animate.css">
	<style>
	
	*{
		margin:0;
		padding:0;
	}
	html{
		width: 100%;
		height: 100%;
	}
	body{
		width: 100%;
		height: 100%;
		background:url('img/bg.png') scroll no-repeat;
		background-size:1920px,726px;
		
	}
	.box{
		width: 100%;
		height:187px;
		text-align:center;
		
	}
	
	.center{
		width: 905px;
		height: 430px;
		display:inline-block;	
	}
	.content{
		width: 100%;
		height: 500px;
		text-align:center;
	}
	.center img{
		float:left;
		height: 140px;
	}
	.center-left img:nth-of-type(1){
		width: 277px;
		margin-right:10px;
	}
	.center-left img:nth-of-type(2){
		width: 162px;
	
	}
	.center-right img:nth-of-type(1){
		width: 162px;
		margin-right:2px;
	}
	.center-right img:nth-of-type(2){
		width: 240px;
		
	}
	.center-left img:nth-of-type(3){
		width: 277px;
		margin-right:10px;
	}
	.center-left img:nth-of-type(4){
		width: 162px;
		
	}
	.center-right img:nth-of-type(3){
		width: 162px;
		
	}
	.center-right img:nth-of-type(4){
		width: 240px;

		
	}
	.center-left img:nth-of-type(5){
		width: 277px;
		margin-right:10px;
	}
	.center-left img:nth-of-type(6){
		width: 162px;
	
	}
	.center-right img:nth-of-type(5){
		width: 162px;
		margin-right:2px;
	}
	.center-right img:nth-of-type(6){
		width: 240px;
		
	}
	span{
		width: 1000px;
		text-align:left;
		margin-top:100px;
		display:inline-block;
		
	}
	.tianqi{
		float:right;
		padding:50px 50px 0 0;
	}
	footer{
		text-align:center;
	}
	.center-left{
		width: 50%;
		height: 430px;
		float:left;
	}
	.center-right{
		width: 50%;
		height: 430px;
		float:left;
	}
	.conter img:hover{

	}
	@media screen and (max-width: 630px){
		.huoli{
			width: 300px;
			
			text-align:left;
			margin-top:50px;
			display:inline-block;
		}
		.huoli img:nthof-type(2){
			width: 100%;
		}
		.center{
			width: 60%;
			
			display:inline-block;	
		}
		.center-left{
		width: 100%;
		height: 220px;
		
	}
	.center-right{
		width: 100%;
		height: 200px;
		
	}
		.center img{
		float:left;
		height: 71px;
		}
	.center-left img:nth-of-type(1){
		width: 60%;
		margin-right:2%;
		}
	.center-left img:nth-of-type(2){
		width: 35%;
	
		}
	
	.center-left img:nth-of-type(3){
		width: 60%;
		margin-right:2%;
		}
	.center-left img:nth-of-type(4){
		width: 35%;
		
		}
	
	.center-left img:nth-of-type(5){
		width: 60%;
		margin-right:2%;
		}
	.center-left img:nth-of-type(6){
		width: 35%;
	
		}
	.conter-right img:nth-of-type(1){
		width: 35%;
		margin-right:2%;
		}
	.conter-right img:nth-of-type(2){
		width: 60%;
	
		}
	
	.conter-right img:nth-of-type(3){
		width: 35%;
		margin-right:2%;
		}
	.conter-right img:nth-of-type(4){
		width: 60%;
		
		}
	
	.conter-right img:nth-of-type(5){
		width: 35%;
		margin-right:2%;
		}
	.conter-right img:nth-of-type(6){
		width: 60%;
	
		}
		.wenzi{
			width: 80%;
		}
	}
	.center-left img:nth-of-type(1):hover {
		-webkit-animation:swing 1s;
	}
	.center-left img:nth-of-type(2):hover {
		-webkit-animation:shake 1s;
	}
	.center-left img:nth-of-type(3):hover {
		-webkit-animation:swing 1s;
	}
	.center-left img:nth-of-type(4):hover {
		-webkit-animation:shake 1s;
	}
	.center-left img:nth-of-type(5):hover {
		-webkit-animation:swing 1s;
	}
	.center-left img:nth-of-type(6):hover {
		-webkit-animation:shake 1s;
	}
	.conter-right img:nth-of-type(1):hover {
		-webkit-animation:rubberBand 1s;
	}
	.conter-right img:nth-of-type(2):hover {
		-webkit-animation:bounce 1s;
	}
	.conter-right img:nth-of-type(3):hover {
		-webkit-animation:rubberBand 1s;
	}
	.conter-right img:nth-of-type(4):hover {
		-webkit-animation:rubberBand 1s;
	}
	.conter-right img:nth-of-type(5):hover {
		-webkit-animation:bounce 1s;
	}
	.conter-right img:nth-of-type(6):hover {
		-webkit-animation:rubberBand 1s;
	}

	</style>
	
</head>
<body>
	
		
	<div class="box">
		<span class="huoli">
			<img src="img/1.png" alt="">
			<img src="img/2.png" alt="">
		</span>
		
	</div>
	<div class="content">
		<div class="center">
			<div class="center-left">
				<img src="img/3.png" alt="" >
				<img src="img/4.png" alt="" >
				<img src="img/7.png" alt="" >
				<img src="img/8.png" alt="" >
				<img src="img/11.png" alt="">
				<img src="img/12.png" alt="">
			</div>
			<div class="conter-right">
				<img src="img/5.png" alt="" >
				<img src="img/6.png" alt="" >
				<img src="img/9.png" alt="" >
				<img src="img/10.png" alt="" >
				<img src="img/13.png" alt="" >
				<img src="img/14.png" alt="" >	
			</div>
			
			
			
			
			
		</div>
	</div>
	<footer>
		<img src="img/15.png" alt="" class="wenzi">
	</footer>
	
		
	
</body>
</html>